<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta http-equiv="Content-Style-Type" content="text/css" />
    <meta name="keywords" content="ui,gui,prototyping,designer,builder,rad,ria,spa,no-code,codeless,without coding,programming,development,drag and drop,web application,build app,create app,make app" />
    <meta name="description" content="Powered by CrossUI No-Code App Builder - Create Interactive App Without Coding" />
    <meta name="copyright" content="copyright@crossui.com" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta http-equiv="imagetoolbar" content="no" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../css/default.css" />
    <title>Powered by CrossUI No-Code App Builder - Examples</title>
</head>
<body>
    <div id="layout">
        <div id="head">
            <div>
                <a href="https://www.crossui.com"><img style="float:right;height:68px" border=0 src=../img/logo.png /></a>
                <span id='flag'><img border=0 src=../img/supported.png /></span>
            </div>
        </div>
        <div id="body">

            <div class='block' style='text-align:center;position:relative;'>
    <div><div class=b1></div><div class=b2></div><div class=b3></div></div><div class=bi>
                <a target=_blank href='https://www.crossui.com/RADGithub'>Try App Builder Online</a> ·
                <a target=_blank href='https://www.crossui.com/xui/Examples'>Examples</a> ·
                <a target=_blank href='https://www.crossui.com/download.html'>Download</a> ·
                <!--a target=_blank href='https://www.crossui.com/Forum'>Forum</a--> ·
                <a target=_blank href='https://www.crossui.com/xui/API/index.html'>API</a> 
    </div><div><div class=b3></div><div class=b2></div><div class=b1></div></div>
            </div>   
        <div class="title" style="text-align:center;">CrossUI Examples</div>

            <div class="block">
<div><div class="b1"></div><div class="b2"></div><div class="b3"></div></div><div class="bi">
                    Highlights
</div><div><div class="b3"></div><div class="b2"></div><div class="b1"></div></div>
            </div>
            <table id="list" cellpadding="0" cellspacing="2" width="100%">
                <tr>
                    <td width="33%" valign="top">
<div><div class="b1"></div><div class="b2"></div><div class="b3"></div></div><div class="bi">                        
                        <table height="100"><tr><td>
                            <a target="_blank" href="https://www.crossui.com/RAD/Builder.html">
                                <img src="img/hl.uibuilder.jpg"/>
                            </a>
                        </td><td valign="top">
                            <a target="_blank" href="https://www.crossui.com/RAD/Builder.html">
                                <h4>CrossUI RAD</h4>
                                <p>Rapid Application Develop tools. Developers can create web app just like in VB or Delphi.</p>
                            </a>
                        </td></tr></table>
</div><div><div class="b3"></div><div class="b2"></div><div class="b1"></div></div>
                    </td>
                    <td valign="top">
<div><div class="b1"></div><div class="b2"></div><div class="b3"></div></div><div class="bi">
                        <table height="100"><tr><td>
                            <a target="_blank" href="../CodeSnip/index.html">
                                <img src="img/hl.codesnip.jpg"/>
                            </a>
                        </td><td valign="top">
                            <a target="_blank" href="../CodeSnip/index.html">
                                <h4>CrossUI Code Snippets</h4>
                                <p>Code snippets for CrossUI developers.</p>
                            </a>
                        </td></tr></table>
</div><div><div class="b3"></div><div class="b2"></div><div class="b1"></div></div>
                    </td>
                    <td width="33%" valign="top">
<div><div class="b1"></div><div class="b2"></div><div class="b3"></div></div><div class="bi">
                        <table height="100"><tr><td>
                            <a target="_blank" href="comb/ThemeRoller/index.html">
                                <img src="img/hl.tr.jpg"/>
                            </a>
                        </td><td valign="top">
                            <a target="_blank" href="comb/ThemeRoller/index.html">
                                <h4>Theme Roller<img style="border:none;vertical-align:middle;" src="../img/new.gif" /></h4>
                                <p>Custom theme with the Theme Roller easily .</p>
                            </a>
                        </td></tr></table>
</div><div><div class="b3"></div><div class="b2"></div><div class="b1"></div></div>
                    </td>
                </tr>
            </table>
            

            <div class="block">
<div><div class="b1"></div><div class="b2"></div><div class="b3"></div></div><div class="bi">
                    Combination Examples
</div><div><div class="b3"></div><div class="b2"></div><div class="b1"></div></div>
            </div>
            <table id="list" cellpadding="0" cellspacing="2" width="100%">
                <tr>
                    <td width="33%" valign="top">
<div><div class="b1"></div><div class="b2"></div><div class="b3"></div></div><div class="bi">                        
                        <table height="100"><tr><td>
                            <a target=_blank href='https://www.crossui.com/FCEditor'>
                                 <img src="img/xui.UI.FusionChartXT3.jpg"/>
                            </a>
                        </td><td valign="top">
                            <a target=_blank href='https://www.crossui.com/FCEditor'>
                                <h4>FusionChartXT Editor</h4>
                                <p>Enable web developers to edit FusionChartXT WYSIWYG.</p>
                            </a>
                        </td></tr></table>
</div><div><div class="b3"></div><div class="b2"></div><div class="b1"></div></div>
                    </td>
                    <td width="33%" valign="top">
<div><div class="b1"></div><div class="b2"></div><div class="b3"></div></div><div class="bi">
                        <table height="100"><tr><td>
                            <a target=_blank href='https://www.crossui.com/JSONEditor'>
                                <img src="img/comb.jsoneditor.jpg"/>
                            </a>
                        </td><td valign="top">
                            <a target=_blank href='https://www.crossui.com/JSONEditor'>
                                <h4>JSON Editor</h4>
                                <p>Enable web developer edit complex JSON string in a inline editable tree.</p>
                            </a>
                        </td></tr></table>
</div><div><div class="b3"></div><div class="b2"></div><div class="b1"></div></div>
                    </td>
                    <td valign="top">
<div><div class="b1"></div><div class="b2"></div><div class="b3"></div></div><div class="bi">
                        <table height="100"><tr><td>
                            <a target="_blank" href="comb/DashBoard/index.html">
                                <img src="img/comb.dashboard.jpg"/>
                            </a>
                        </td><td valign="top">
                            <a target="_blank" href="comb/DashBoard/index.html">
                                <h4>Dashboard<img style="border:none;vertical-align:middle;" src="../img/new.gif" /></h4></h4>
                                <p>A Dashboard built by CrossUI with No Coding.</p>
                            </a>
                        </td></tr></table>
</div><div><div class="b3"></div><div class="b2"></div><div class="b1"></div></div>
                    </td>
                    <!--td valign="top">
<div><div class="b1"></div><div class="b2"></div><div class="b3"></div></div><div class="bi">
                        <table height="100"><tr><td>
                            <a target="_blank" href="https://www.crossui.com/FormBuilder">
                                <img src="img/combo.formbuilder.jpg"/>
                            </a>
                        </td><td valign="top">
                            <a target="_blank" href="https://www.crossui.com/FormBuilder">
                                <h4>Form Builder</h4>
                                <p>A Drag&Drop Form Builder, to build Online Forms with No Coding.</p>
                            </a>
                        </td></tr></table>
</div><div><div class="b3"></div><div class="b2"></div><div class="b1"></div></div>
                    </td-->
                </tr>
            </table>
            <table id="list" cellpadding="0" cellspacing="2" width="100%">
                <tr>
                    <td width="33%" valign="top">
<div><div class="b1"></div><div class="b2"></div><div class="b3"></div></div><div class="bi">                        
                        <table height="100"><tr><td>
                            <a target="_blank" href="comb/Themes/index.html">
                                <img src="img/comb.themes.jpg"/>
                            </a>
                        </td><td valign="top">
                            <a target="_blank" href="comb/Themes/index.html">
                                <h4>Themes<img style="border:none;vertical-align:middle;" src="../img/new.gif" /></h4>
                                <p>Switches application theme dynamically.</p>
                            </a>
                        </td></tr></table>
</div><div><div class="b3"></div><div class="b2"></div><div class="b1"></div></div>
                    </td>
                    <td width="33%" valign="top">
<div><div class="b1"></div><div class="b2"></div><div class="b3"></div></div><div class="bi">
                        <table height="100"><tr><td>
                            <a target="_blank" href="comb/SandboxTheme/index.html">
                                <img src="img/comb.sbtheme.jpg"/>
                            </a>
                        </td><td valign="top">
                            <a target="_blank" href="comb/SandboxTheme/index.html">
                                <h4>Sandbox Theme<img style="border:none;vertical-align:middle;" src="../img/new.gif" /></h4>
                                <p>Applying sandbox theme to any container ... </p>
                            </a>
                        </td></tr></table>
</div><div><div class="b3"></div><div class="b2"></div><div class="b1"></div></div>
                    </td>
                    <td valign="top">
<div><div class="b1"></div><div class="b2"></div><div class="b3"></div></div><div class="bi">
                        <table height="100"><tr><td>
                            <a target="_blank" href="comb/OrderManagement/index.html">
                                <img src="img/comb.ordermanagement.jpg"/>
                            </a>
                        </td><td valign="top">
                            <a target="_blank" href="https://www.crossui.com/demo/OrderManagement">
                                <h4>Order Management</h4>
                                <p>A real case adapted from one of our enterprise customers. </p>
                            </a>
                        </td></tr></table>
</div><div><div class="b3"></div><div class="b2"></div><div class="b1"></div></div>
                    </td>
                </tr>
            </table>
            <table id="list" cellpadding="0" cellspacing="2" width="100%">
                <tr>
                    <td width="33%" valign="top">
<div><div class="b1"></div><div class="b2"></div><div class="b3"></div></div><div class="bi">
                        <table height="60"><tr><td>
                        </td><td valign="top">
                            <a target="_blank" href="comb/datasource/index.html">
                                <h4>Web API Caller</h4>
                                <p>Web API Caller for JSON, XMLRPC and SOAP.</p>
                            </a>
                        </td></tr></table>
</div><div><div class="b3"></div><div class="b2"></div><div class="b1"></div></div>
                    </td>
                    <td width="33%" valign="top">
<div><div class="b1"></div><div class="b2"></div><div class="b3"></div></div><div class="bi">
                        <table height="60"><tr><td>
                        </td><td valign="top">
                            <a target="_blank" href="comb/DataBinder/index.html">
                                <h4>DataBinder Overview</h4>
                                <p>Overview of the features of the DataBinder object.</p>
                            </a>
                        </td></tr></table>
</div><div><div class="b3"></div><div class="b2"></div><div class="b1"></div></div>
                    </td>
                    <td width="34%" valign="top">
<div><div class="b1"></div><div class="b2"></div><div class="b3"></div></div><div class="bi">
                        <table height="60"><tr><td>
                        </td><td valign="top">
                            <a target="_blank" href="xui/appearance/CSS3Tester/index.html">
                                <h4>CSS3 Tester</h4>
                                <p>Build-in CSS test functions.</p>
                            </a>
                        </td></tr></table>
</div><div><div class="b3"></div><div class="b2"></div><div class="b1"></div></div>
                    </td>
                </tr>
            </table>


            <div class="block">
<div><div class="b1"></div><div class="b2"></div><div class="b3"></div></div><div class="bi">
                    IO
</div><div><div class="b3"></div><div class="b2"></div><div class="b1"></div></div>
            </div>
            <table id="list" cellpadding="0" cellspacing="2" width="100%">
                <tr>
                    <td width="33%" valign="top">
<div><div class="b1"></div><div class="b2"></div><div class="b3"></div></div><div class="bi">                        
                        <table height="100"><tr><td>
                            <a target="_blank" href="xui/IO/basic/index.html">
                                <img src="img/xui.IO.basic.jpg"/>
                            </a>
                        </td><td valign="top">
                            <a target="_blank" href="xui/IO/basic/index.html">
                                <h4>Basic</h4>
                                <p>Using xui.Ajax/JSONP/XDMI to interact with json service</p>
                            </a>
                        </td></tr></table>
</div><div><div class="b3"></div><div class="b2"></div><div class="b1"></div></div>
                    </td>
                    <td width="33%" valign="top">
<div><div class="b1"></div><div class="b2"></div><div class="b3"></div></div><div class="bi">
                        <table height="100"><tr><td>
                            <a target="_blank" href="xui/IO/monitor/index.html">
                                <img src="img/xui.IO.basic.jpg"/>
                            </a>
                        </td><td valign="top">
                            <a target="_blank" href="xui/IO/monitor/index.html">
                               <h4>Interaction Monitor</h4>
                                <p>To monitor the IO request process.</p>
                            </a>
                        </td></tr></table>
</div><div><div class="b3"></div><div class="b2"></div><div class="b1"></div></div>
                    </td>
                    <td valign="top">
<div><div class="b1"></div><div class="b2"></div><div class="b3"></div></div><div class="bi">
                        <table height="100"><tr><td>
                            <a target="_blank" href="xui/IO/complicated/index.html">
                                <img src="img/xui.IO.complicated.jpg"/>
                            </a>
                        </td><td valign="top">
                            <a target="_blank" href="xui/IO/complicated/index.html">
                                <h4>Complicated Interaction</h4>
                                <p>"bi"nding several Ajax requests into one thread.</p>
                            </a>
                        </td></tr></table>
</div><div><div class="b3"></div><div class="b2"></div><div class="b1"></div></div>
                    </td>
                </tr>
            </table>
            <table id="list" cellpadding="0" cellspacing="2" width="100%">
                <tr>
                    <td width="33%" valign="top">
<div><div class="b1"></div><div class="b2"></div><div class="b3"></div></div><div class="bi">                        
                        <table height="60"><tr><td>
                        </td><td valign="top">
                            <a target="_blank" href="comb/JSONWSClient/index.html">
                                <h4>JSON Webservice Client</h4>
                                <p>A client for JSON Webservices.</p>
                            </a>
                        </td></tr></table>
</div><div><div class="b3"></div><div class="b2"></div><div class="b1"></div></div>
                    </td>
                    <td width="33%" valign="top">
<div><div class="b1"></div><div class="b2"></div><div class="b3"></div></div><div class="bi">                        
                        <table height="60"><tr><td>
                        </td><td valign="top">
                            <a target="_blank" href="comb/XMLRPCWSClient/index.html">
                                <h4>XMLRPC Client</h4>
                                <p>A client for XMLRPC.</p>
                            </a>
                        </td></tr></table>
</div><div><div class="b3"></div><div class="b2"></div><div class="b1"></div></div>
                    </td>
                    <td width="33%" valign="top">
<div><div class="b1"></div><div class="b2"></div><div class="b3"></div></div><div class="bi">
                        <table height="60"><tr><td>
                        </td><td valign="top">
                            <a target="_blank" href="comb/SOAPWSClient/index.html">
                                <h4>SOAP Client</h4>
                                <p>A client for SOAP.</p>
                            </a>
                        </td></tr></table>
</div><div><div class="b3"></div><div class="b2"></div><div class="b1"></div></div>
                    </td>

                </tr>
            </table>

            <div class="block">
<div><div class="b1"></div><div class="b2"></div><div class="b3"></div></div><div class="bi">
                    Interact with DB
</div><div><div class="b3"></div><div class="b2"></div><div class="b1"></div></div>
            </div>
            <table id="list" cellpadding="0" cellspacing="2" width="100%">
                <tr>
                    <td width="33%" valign="top">
<div><div class="b1"></div><div class="b2"></div><div class="b3"></div></div><div class="bi">                        
                        <table height="100"><tr><td>
                            <a target="_blank" href="comb/dbdemo/index.html">
                                <img src="img/combo.dbdemo.jpg"/>
                            </a>
                        </td><td valign="top">
                            <a target="_blank" href="comb/dbdemo/index.html">
                                <h4>Interact with MYSQL</h4>
                                <p>Interact (RUID) with MYSQL. The backend is php.</p>
                            </a>
                        </td></tr></table>
                        <p>Download <a href="https://www.crossui.com/Download/xui.zip">CrossUI Framework Package</a> for source code.</p>
</div><div><div class="b3"></div><div class="b2"></div><div class="b1"></div></div>
                    </td>
                    <td width="33%" valign="top">
<div><div class="b1"></div><div class="b2"></div><div class="b3"></div></div><div class="bi">
                        <table height="100"><tr><td>
                            <a target="_blank" href="comb/MySQLAdmin/index.html">
                                <img src="img/combo.mysqladmin.jpg"/>
                            </a>
                        </td><td valign="top">
                            <a target="_blank" href="comb/MySQLAdmin/index.html">
                                <h4>A simple MySQL Admin</h4>
                                <p>Browses databases and tables of a given mysql instance.</p>
                            </a>
                        </td></tr></table>
                        <p>Download <a href="https://www.crossui.com/Download/xui.zip">CrossUI Framework Package</a> for source code.</p>
</div><div><div class="b3"></div><div class="b2"></div><div class="b1"></div></div>
                    </td>
                    <td valign="top">
<div><div class="b1"></div><div class="b2"></div><div class="b3"></div></div><div class="bi">
                        <table height="100"><tr><td>
                            <a target="_blank" href="https://www.crossui.com/demo/OrderManagement/index.html">
                                <img src="img/comb.ordermanagement.png"/>
                            </a>
                        </td><td valign="top">
                            <a target="_blank" href="https://www.crossui.com/demo/OrderManagement/index.html">
                                <h4>An Order Management</h4>
                                <p>From one of our customers realcases.</p>
                            </a>
                        </td></tr></table>
                        <p>Download <a href="https://www.crossui.com/Download/realcase.OrderManagement.zip"> the package</a> for source code.</p>
</div><div><div class="b3"></div><div class="b2"></div><div class="b1"></div></div>                    
                    </td>
                </tr>
            </table>


            <div class="block">
<div><div class="b1"></div><div class="b2"></div><div class="b3"></div></div><div class="bi">
                    Application related
</div><div><div class="b3"></div><div class="b2"></div><div class="b1"></div></div>
            </div>
            <table id="list" cellpadding="0" cellspacing="2" width="100%">
                <tr>
                    <td width="33%" valign="top">
<div><div class="b1"></div><div class="b2"></div><div class="b3"></div></div><div class="bi">                        
                        <table height="100"><tr><td>
                            <a target="_blank" href="xui/app/distributed/index.html">
                                <img src="img/xui.app.distributed.jpg"/>
                            </a>
                        </td><td valign="top">
                            <a target="_blank" href="xui/app/distributed/index.html">
                                <h4>Distributed UI</h4>
                                <p>Loading js code from remote server, and render it as an UI component.</p>
                            </a>
                        </td></tr></table>
</div><div><div class="b3"></div><div class="b2"></div><div class="b1"></div></div>
                    </td>
                    <td width="33%" valign="top">
<div><div class="b1"></div><div class="b2"></div><div class="b3"></div></div><div class="bi">
                        <table height="100"><tr><td>
                            <a target="_blank" href="xui/misc/lang/index.html">
                                <img src="img/xui.misc.lang.jpg"/>
                            </a>
                        </td><td valign="top">
                            <a target="_blank" href="xui/misc/lang/index.html">
                                <h4>Localization</h4>
                                <p>Apply different languages on the fly, no need to reload page. </p>
                            </a>
                        </td></tr></table>
</div><div><div class="b3"></div><div class="b2"></div><div class="b1"></div></div>
                    </td>
                    <td valign="top">
<div><div class="b1"></div><div class="b2"></div><div class="b3"></div></div><div class="bi">
                        <table height="100"><tr><td>
                            <a target="_blank" href="xui/misc/keynav/index.html">
                                <img src="img/xui.keynav.jpg"/>
                            </a>
                        </td><td valign="top">
                            <a target="_blank" href="xui/misc/keynav/index.html">
                                <h4>Key Navigation</h4>
                                <p>Use the arrow keys to navigate the board.</p>
                            </a>
                        </td></tr></table>
</div><div><div class="b3"></div><div class="b2"></div><div class="b1"></div></div>
                    </td>
                </tr>
            </table>
            <table id="list" cellpadding="0" cellspacing="2" width="100%">
                <tr>
                    <td width="33%" valign="top">
<div><div class="b1"></div><div class="b2"></div><div class="b3"></div></div><div class="bi">
                        <table height="60"><tr><td>
                        </td><td valign="top">
                            <a target="_blank" href="xui/appearance/Skin/index.html">
                                <h4>Application Skin</h4>
                                <p>Define your own application skin base on one of the CrossUI theme.</p>
                            </a>
                        </td></tr></table>
</div><div><div class="b3"></div><div class="b2"></div><div class="b1"></div></div>
                    </td>
                    <td width="33%" valign="top">
<div><div class="b1"></div><div class="b2"></div><div class="b3"></div></div><div class="bi">
                        <table height="60"><tr><td>
                        </td><td valign="top">
                            <a target="_blank" href="xui/misc/history/index.html">
                                <h4>Browser History</h4>
                                <p>How to make a markable web application.</p>
                            </a>
                        </td></tr></table>
</div><div><div class="b3"></div><div class="b2"></div><div class="b1"></div></div>
                    </td>
                    <td valign="top">
<div><div class="b1"></div><div class="b2"></div><div class="b3"></div></div><div class="bi">
                        <table height="60"><tr><td>
                        </td><td valign="top">
                            <a target="_blank" href="xui/app/assembly/index.html">
                                <h4>Component assembly process</h4>
                                <p>Monitors component assembly process  in <b>"slow motion"</b>.</p>
                            </a>
                        </td></tr></table>
</div><div><div class="b3"></div><div class="b2"></div><div class="b1"></div></div>
                    </td>
                </tr>
            </table>
            <table id="list" cellpadding="0" cellspacing="2" width="100%">
                <tr>
                    <td width="33%" valign="top">
<div><div class="b1"></div><div class="b2"></div><div class="b3"></div></div><div class="bi">
                        <table height="80"><tr><td>
                        </td><td valign="top">
                            <a target="_blank" href="xui/app/int3rd/index.html">
                                <h4>Integrate 3rd party</h4>
                                <p>Specifying widget's domId to integrate leaflet js map scripts.</p>
                            </a>
                        </td></tr></table>
</div><div><div class="b3"></div><div class="b2"></div><div class="b1"></div></div>
                    </td>
                    <td width="33%" valign="top">
<div><div class="b1"></div><div class="b2"></div><div class="b3"></div></div><div class="bi">
                        <table height="80"><tr><td>
                        </td><td valign="top">
                            <a target="_blank" href="mobile/MouseEventsInMobileDevice/index.html">
                                <h4>Mouse Simulation</h4>
                                <p>Mouse events(mousedown, mouseup, click, dblclick) simulation in mobile device.</p>
                            </a>
                        </td></tr></table>
</div><div><div class="b3"></div><div class="b2"></div><div class="b1"></div></div>
                    </td>
                    <td valign="top">
<div><div class="b1"></div><div class="b2"></div><div class="b3"></div></div><div class="bi">
                        <table height="80"><tr><td>
                        </td><td valign="top">
                            <a target="_blank" href="xui/app/form/index.html">
                                <h4>Taking a container as a FORM<img style="border:none;vertical-align:middle;" src="../img/new.gif" /></h4>
                                <p>Any container can be used as a form.</p>
                            </a>
                        </td></tr></table>
</div><div><div class="b3"></div><div class="b2"></div><div class="b1"></div></div>
                    </td>
                </tr>
            </table>
            <div class="block">
<div><div class="b1"></div><div class="b2"></div><div class="b3"></div></div><div class="bi">
                    Diagrams
</div><div><div class="b3"></div><div class="b2"></div><div class="b1"></div></div>
            </div>
            <table id="list" cellpadding="0" cellspacing="2" width="100%">
                <tr>
                    <td width="33%" valign="top">
<div><div class="b1"></div><div class="b2"></div><div class="b3"></div></div><div class="bi">                        
                        <table height="100"><tr><td>
                            <a target="_blank" href="xui/widgets/svg/index.html">
                                <img src="img/xui.svg.jpg"/>
                            </a>
                        </td><td valign="top">
                            <a target="_blank" href="xui/widgets/svg/index.html">
                                <h4>Basic diagrams</h4>
                                <p>Vector graphics (SVG, VML in IE8-)</p>
                            </a>
                        </td></tr></table>
</div><div><div class="b3"></div><div class="b2"></div><div class="b1"></div></div>
                    </td>
                    <td width="33%" valign="top">
<div><div class="b1"></div><div class="b2"></div><div class="b3"></div></div><div class="bi">
                        <table height="100"><tr><td>
                            <a target="_blank" href="xui/widgets/flowchart1/index.html">
                                <img src="img/xui.flowchart.jpg"/>
                            </a>
                        </td><td valign="top">
                            <a target="_blank" href="xui/widgets/flowchart1/index.html">
                                <h4>Service Flowchart</h4>
                                <p>A simple business service flowchart drawing sample.</p>
                            </a>
                        </td></tr></table>
</div><div><div class="b3"></div><div class="b2"></div><div class="b1"></div></div>
                    </td>
                    <td valign="top">
<div><div class="b1"></div><div class="b2"></div><div class="b3"></div></div><div class="bi">                        
                        <table height="100"><tr><td>
                            <a target="_blank" href="xui/widgets/flowchart2/index.html">
                                <img src="img/xui.flowchart2.jpg"/>
                            </a>
                        </td><td valign="top">
                            <a target="_blank" href="xui/widgets/flowchart2/index.html">
                                <h4>Manufacturer Chart</h4>
                                <p>Gaming machine manufacturer</p>
                            </a>
                        </td></tr></table>
</div><div><div class="b3"></div><div class="b2"></div><div class="b1"></div></div>
                    </td>
                </tr>
            </table>

            <table id="list" cellpadding="0" cellspacing="2" width="100%">
                <tr>
                    <td width="33%" valign="top">
<div><div class="b1"></div><div class="b2"></div><div class="b3"></div></div><div class="bi">                        
                        <table height="100"><tr><td>
                            <a target="_blank" href="xui/widgets/fcxt1/index.html">
                                <img src="img/xui.UI.FusionChartXT1.jpg"/>
                            </a>
                        </td><td valign="top">
                            <a target="_blank" href="xui/widgets/fcxt1/index.html">
                                <h4>Monthly Sales</h4>
                                <p>Update Monthly Sales Summary cynamically</p>
                            </a>
                        </td></tr></table>
</div><div><div class="b3"></div><div class="b2"></div><div class="b1"></div></div>
                    </td>
                    <td width="33%" valign="top">
<div><div class="b1"></div><div class="b2"></div><div class="b3"></div></div><div class="bi">
                        <table height="100"><tr><td>
                            <a target="_blank" href="xui/widgets/fcxt2/index.html">
                                <img src="img/xui.UI.FusionChartXT2.jpg"/>
                            </a>
                        </td><td valign="top">
                            <a target="_blank" href="xui/widgets/fcxt2/index.html">
                                <h4>Chart Switching</h4>
                                <p>Changing the chart type to visualize the same data with a completely different perspective.</p>
                            </a>
                        </td></tr></table>
</div><div><div class="b3"></div><div class="b2"></div><div class="b1"></div></div>
                    </td>
                    <td valign="top">
                    </td>
                </tr>
            </table>
            <div class="block">
<div><div class="b1"></div><div class="b2"></div><div class="b3"></div></div><div class="bi">
                    Drag and Drop
</div><div><div class="b3"></div><div class="b2"></div><div class="b1"></div></div>
            </div>
            <table id="list" cellpadding="0" cellspacing="2" width="100%">
                <tr>
                    <td width="33%" valign="top">
<div><div class="b1"></div><div class="b2"></div><div class="b3"></div></div><div class="bi">                        
                        <table height="100"><tr><td>
                            <a target="_blank" href="xui/dd/ddpanel/index.html">
                                <img src="img/xui.dd.ddpanel.jpg"/>
                            </a>
                        </td><td valign="top">
                            <a target="_blank" href="xui/dd/ddpanel/index.html">
                                <h4>DD child between widgets</h4>
                                <p>Drag a child widget from a widget, and drop it into another widget.</p>
                            </a>
                        </td></tr></table>
</div><div><div class="b3"></div><div class="b2"></div><div class="b1"></div></div>
                    </td>
                    <td width="33%" valign="top">
<div><div class="b1"></div><div class="b2"></div><div class="b3"></div></div><div class="bi">
                        <table height="100"><tr><td>
                            <a target="_blank" href="xui/dd/ddpage/index.html">
                                <img src="img/xui.dd.ddpage.jpg"/>
                            </a>
                        </td><td valign="top">
                            <a target="_blank" href="xui/dd/ddpage/index.html">
                               <h4>DD panel between widgets</h4>
                                <p>Drag a panel from a widget, and drop it into another widget.</p>
                            </a>
                        </td></tr></table>
</div><div><div class="b3"></div><div class="b2"></div><div class="b1"></div></div>
                    </td>
                    <td valign="top">
<div><div class="b1"></div><div class="b2"></div><div class="b3"></div></div><div class="bi">
                        <table height="100"><tr><td>
                            <a target="_blank" href="xui/dd/ddinlist/index.html">
                                <img src="img/xui.dd.ddinlist.jpg"/>
                            </a>
                        </td><td valign="top">
                            <a target="_blank" href="xui/dd/ddinlist/index.html">
                                <h4>DD between widgets</h4>
                                <p>Drag&Drop between List, RadioBox, TreeBar and ...</p>
                            </a>
                        </td></tr></table>
</div><div><div class="b3"></div><div class="b2"></div><div class="b1"></div></div>
                    </td>
                </tr>
            </table>


            <div class="block">
<div><div class="b1"></div><div class="b2"></div><div class="b3"></div></div><div class="bi">
                    serialize and unserialize
</div><div><div class="b3"></div><div class="b2"></div><div class="b1"></div></div>
            </div>
            <table id="list" cellpadding="0" cellspacing="2" width="100%">
                <tr>
                    <td width="33%" valign="top">
<div><div class="b1"></div><div class="b2"></div><div class="b3"></div></div><div class="bi">                        
                        <table height="100"><tr><td>
                            <a target="_blank" href="xui/serialize/xui/index.html">
                                <img src="img/xui.serialize.xui.jpg"/>
                            </a>
                        </td><td valign="top">
                            <a target="_blank" href="xui/serialize/xui/index.html">
                                <h4>serialize xui.UI</h4>
                                <p>Serialize/Unserialize xui.UI object</p>
                            </a>
                        </td></tr></table>
</div><div><div class="b3"></div><div class="b2"></div><div class="b1"></div></div>
                    </td>
                    <td width="33%" valign="top">
<div><div class="b1"></div><div class="b2"></div><div class="b3"></div></div><div class="bi">
                        <table height="100"><tr><td>
                            <a target="_blank" href="xui/serialize/Form/index.html">
                                <img src="img/xui.serialize.form.jpg"/>
                            </a>
                        </td><td valign="top">
                            <a target="_blank" href="xui/serialize/Form/index.html">
                               <h4>Form Builder</h4>
                                <p>Build form from JSON string.</p>
                            </a>
                        </td></tr></table>
</div><div><div class="b3"></div><div class="b2"></div><div class="b1"></div></div>
                    </td>
                    <td width="33%" valign="top">
<div><div class="b1"></div><div class="b2"></div><div class="b3"></div></div><div class="bi">                        
                        <table height="100"><tr><td>
                            <a target="_blank" href="xui/forms/DataBinder/index.html">
                                <img src="img/xui.forms.databinder.jpg"/>
                            </a>
                        </td><td valign="top">
                            <a target="_blank" href="xui/forms/DataBinder/index.html">
                                <h4>The Databinder</h4>
                                <p>Uses databinder to get/set a group of controls' value.</p>
                            </a>
                        </td></tr></table>
</div><div><div class="b3"></div><div class="b2"></div><div class="b1"></div></div>
                    </td>
                </tr>
            </table>
            <div class="block">
<div><div class="b1"></div><div class="b2"></div><div class="b3"></div></div><div class="bi">
                    TreeGrid
</div><div><div class="b3"></div><div class="b2"></div><div class="b1"></div></div>
            </div>
            <table id="list" cellpadding="0" cellspacing="2" width="100%">
                <tr>
                    <td width="33%" valign="top">
<div><div class="b1"></div><div class="b2"></div><div class="b3"></div></div><div class="bi">                        
                        <table height="100"><tr><td>
                            <a target="_blank" href="xui/widgets/TreeGrid/index.html">
                                <img src="img/xui.widgets.treegrid.jpg"/>
                            </a>
                        </td><td valign="top">
                            <a target="_blank" href="xui/widgets/TreeGrid/index.html">
                                <h4>TreeGrid Overall</h4>
                                <p>xui.UI.TreeGrid overall.</p>
                            </a>
                        </td></tr></table>
</div><div><div class="b3"></div><div class="b2"></div><div class="b1"></div></div>
                    </td>
                    <td width="33%" valign="top">
<div><div class="b1"></div><div class="b2"></div><div class="b3"></div></div><div class="bi">
                        <table height="100"><tr><td>
                            <a target="_blank" href="xui/widgets/TreeGrid.Paging/index.html">
                                <img src="img/xui.treegrid.paging.jpg"/>
                            </a>
                        </td><td valign="top">
                            <a target="_blank" href="xui/widgets/TreeGrid.Paging/index.html">
                                <h4>Paging</h4>
                                <p> </p>
                            </a>
                        </td></tr></table>
</div><div><div class="b3"></div><div class="b2"></div><div class="b1"></div></div>
                    </td>
                    <td valign="top">
<div><div class="b1"></div><div class="b2"></div><div class="b3"></div></div><div class="bi">
                        <table height="100"><tr><td>
                            <a target="_blank" href="xui/widgets/TGDynamic/index.html">
                                <img src="img/xui.treegrid.dynamic.jpg"/>
                            </a>
                        </td><td valign="top">
                            <a target="_blank" href="xui/widgets/TGDynamic/index.html">
                                <h4>Update TreeGrid dynamically!</h4>
                                <p> </p>
                            </a>
                        </td></tr></table>
</div><div><div class="b3"></div><div class="b2"></div><div class="b1"></div></div>
                    </td>
                </tr>
            </table>

            <table id="list" cellpadding="0" cellspacing="2" width="100%">
                <tr>
                    <td width="33%" valign="top">
<div><div class="b1"></div><div class="b2"></div><div class="b3"></div></div><div class="bi">
                        <table height="60"><tr><td>
                        </td><td valign="top">
                            <a target="_blank" href="xui/widgets/TGXml/index.html">
                                <h4>JSON/XML data</h4>
                                <p>Load data from JSON/XML.</p>
                            </a>
                        </td></tr></table>
</div><div><div class="b3"></div><div class="b2"></div><div class="b1"></div></div>
                    </td>
                    <td width="33%" valign="top">
<div><div class="b1"></div><div class="b2"></div><div class="b3"></div></div><div class="bi">
                        <table height="60"><tr><td>
                        </td><td valign="top">
                            <a target="_blank" href="comb/GridEditor/index.html">
                                <h4>GridEditor</h4>
                                <p>Inline Grid Editor; Pop window Grid Editor.</p>
                            </a>
                        </td></tr></table>
</div><div><div class="b3"></div><div class="b2"></div><div class="b1"></div></div>
                    </td>
                    <td valign="top">
<div><div class="b1"></div><div class="b2"></div><div class="b3"></div></div><div class="bi">
                        <table height="60"><tr><td>
                        </td><td valign="top">
                            <a target="_blank" href="xui/widgets/TGCusCellType/index.html">
                                <h4>Custom cell type</h4>
                                <p>Each cell in treegrid can be customized to any type.</p>
                            </a>
                        </td></tr></table>
</div><div><div class="b3"></div><div class="b2"></div><div class="b1"></div></div>
                    </td>
                </tr>
            </table>

            <table id="list" cellpadding="0" cellspacing="2" width="100%">
                <tr>
                    <td width="33%" valign="top">
<div><div class="b1"></div><div class="b2"></div><div class="b3"></div></div><div class="bi">                        
                        <table height="60"><tr><td>
                        </td><td valign="top">
                            <a target="_blank" href="xui/widgets/TGAltNumb/index.html">
                                <h4>Numbered rows</h4>
                                <p>Numbered rows; Alt rows' background color.</p>
                            </a>
                        </td></tr></table>
</div><div><div class="b3"></div><div class="b2"></div><div class="b1"></div></div>
                    </td>
                    <td width="33%" valign="top">
<div><div class="b1"></div><div class="b2"></div><div class="b3"></div></div><div class="bi">
                        <table height="60"><tr><td>
                        </td><td valign="top">
                            <a target="_blank" href="xui/widgets/TGBinder/index.html">
                                <h4>Binder</h4>
                                <p>Binder a row to a form for editor.</p>
                            </a>
                        </td></tr></table>
</div><div><div class="b3"></div><div class="b2"></div><div class="b1"></div></div>
                    </td>
                    <td valign="top">
<div><div class="b1"></div><div class="b2"></div><div class="b3"></div></div><div class="bi">
                        <table height="60"><tr><td>
                        </td><td valign="top">
                            <a target="_blank" href="xui/widgets/TGDD/index.html">
                                <h4>Drag&Drop rows</h4>
                                <p>Move rows by Drag&Drop.</p>
                            </a>
                        </td></tr></table>
</div><div><div class="b3"></div><div class="b2"></div><div class="b1"></div></div>
                    </td>
                </tr>
            </table>

            <table id="list" cellpadding="0" cellspacing="2" width="100%">
                <tr>
                    <td width="33%" valign="top">
<div><div class="b1"></div><div class="b2"></div><div class="b3"></div></div><div class="bi">                        
                        <table height="60"><tr><td>
                        </td><td valign="top">
                            <a target="_blank" href="xui/widgets/TGGridInGrid/index.html">
                                <h4>Grid in Grid</h4>
                                <p>Inserts a treegrid to a treegrid.</p>
                            </a>
                        </td></tr></table>
</div><div><div class="b3"></div><div class="b2"></div><div class="b1"></div></div>
                    </td>
                    <td width="33%" valign="top">
<div><div class="b1"></div><div class="b2"></div><div class="b3"></div></div><div class="bi">
                        <table height="60"><tr><td>
                        </td><td valign="top">
                            <a target="_blank" href="xui/widgets/TGGroupPreVSum/index.html">
                                <h4>Group</h4>
                                <p>Sets a row as a group.</p>
                            </a>
                        </td></tr></table>
</div><div><div class="b3"></div><div class="b2"></div><div class="b1"></div></div>
                    </td>
                    <td valign="top">
<div><div class="b1"></div><div class="b2"></div><div class="b3"></div></div><div class="bi">
                        <table height="60"><tr><td>
                        </td><td valign="top">
                            <a target="_blank" href="xui/widgets/TGSelMode/index.html">
                                <h4>Row selection mode</h4>
                                <p>Single/Multi row selection; Single/Multi cell selection.</p>
                            </a>
                        </td></tr></table>
</div><div><div class="b3"></div><div class="b2"></div><div class="b1"></div></div>
                    </td>
                </tr>
            </table>

            <table id="list" cellpadding="0" cellspacing="2" width="100%">
                <tr>
                    <td width="33%" valign="top">
<div><div class="b1"></div><div class="b2"></div><div class="b3"></div></div><div class="bi">                        
                        <table height="60"><tr><td>
                        </td><td valign="top">
                            <a target="_blank" href="xui/widgets/TGEditMode/index.html">
                                <h4>Edit mode<img style="border:none;vertical-align:middle;" src="../img/new.gif" /></h4>
                                <p>Focus, Sharp, Hover and Inline.</p>
                            </a>
                        </td></tr></table>
</div><div><div class="b3"></div><div class="b2"></div><div class="b1"></div></div>
                    </td>
                    <td width="33%" valign="top">
<div><div class="b1"></div><div class="b2"></div><div class="b3"></div></div><div class="bi">
                        <table height="60"><tr><td>
                        </td><td valign="top">
                            <a target="_blank" href="xui/widgets/TGFlexColumn/index.html">
                                <h4>Flexible Column<img style="border:none;vertical-align:middle;" src="../img/new.gif" /></h4>
                                <p>To set flexible  width columns.</p>
                            </a>
                        </td></tr></table>
</div><div><div class="b3"></div><div class="b2"></div><div class="b1"></div></div>
                    </td>
                    <td valign="top">
<div><div class="b1"></div><div class="b2"></div><div class="b3"></div></div><div class="bi">
                        <table height="60"><tr><td>
                        </td><td valign="top">
                            <a target="_blank" href="xui/widgets/TGFleezed/index.html">
                                <h4>Freeze rows and columns<img style="border:none;vertical-align:middle;" src="../img/new.gif" /></h4>
                                <p>To freeze rows and columns.</p>
                            </a>
                        </td></tr></table>
</div><div><div class="b3"></div><div class="b2"></div><div class="b1"></div></div>
                    </td>
                </tr>
            </table>

            <div class="block">
<div><div class="b1"></div><div class="b2"></div><div class="b3"></div></div><div class="bi">
                    Toolbars and Menus
</div><div><div class="b3"></div><div class="b2"></div><div class="b1"></div></div>
            </div>
            <table id="list" cellpadding="0" cellspacing="2" width="100%">
                <tr>
                    <td width="33%" valign="top">
<div><div class="b1"></div><div class="b2"></div><div class="b3"></div></div><div class="bi">                        
                        <table height="60"><tr><td>
                        </td><td valign="top">
                            <a target="_blank" href="xui/widgets/ToolBar/index.html">
                                <h4>Advanced ToolBar</h4>
                                <p>Advanced ToolBar with DatePicker, ColorPikcer, ProgressBar ...</p>
                            </a>
                        </td></tr></table>
</div><div><div class="b3"></div><div class="b2"></div><div class="b1"></div></div>
                    </td>
                    <td width="33%" valign="top">
<div><div class="b1"></div><div class="b2"></div><div class="b3"></div></div><div class="bi">
                        <table height="60"><tr><td>
                        </td><td valign="top">
                            <a target="_blank" href="xui/widgets/MenuBar/index.html">
                                <h4>Advanced Menu</h4>
                                <p>Advanced Menu with DatePicker, TimePicker, ColorPikcer ...</p>
                            </a>
                        </td></tr></table>
</div><div><div class="b3"></div><div class="b2"></div><div class="b1"></div></div>
                    </td>
                    <td valign="top">
<div><div class="b1"></div><div class="b2"></div><div class="b3"></div></div><div class="bi">
                        <table height="60"><tr><td>
                        </td><td valign="top">
                            <a target="_blank" href="xui/widgets/PopMenu/index.html">
                                <h4>Pop Menus</h4>
                                <p>Show pop menus in onContextmenu events.</p>
                            </a>
                        </td></tr></table>
</div><div><div class="b3"></div><div class="b2"></div><div class="b1"></div></div>
                    </td>
                </tr>
            </table>

 

            <div class="block">
<div><div class="b1"></div><div class="b2"></div><div class="b3"></div></div><div class="bi">
                    Template
</div><div><div class="b3"></div><div class="b2"></div><div class="b1"></div></div>
            </div>
            <table id="list" cellpadding="0" cellspacing="2" width="100%">
                <tr>
                    <td width="33%" valign="top">
<div><div class="b1"></div><div class="b2"></div><div class="b3"></div></div><div class="bi">                        
                        <table height="60"><tr><td>
                        </td><td valign="top">
                            <a target="_blank" href="xui/Template/basic.html">
                                <h4>Multi-nested</h4>
                                <p>Using xui.Template to create multi-nested html with events supported</p>
                            </a>
                        </td></tr></table>
</div><div><div class="b3"></div><div class="b2"></div><div class="b1"></div></div>
                    </td>
                    <td width="33%" valign="top">
<div><div class="b1"></div><div class="b2"></div><div class="b3"></div></div><div class="bi">
                        <table height="60"><tr><td>
                        </td><td valign="top">
                            <a target="_blank" href="xui/Template/gallery2.html">
                                <h4>Product Gallery</h4>
                                <p>Using xui.Template to create a product gallery application.</p>
                            </a>
                        </td></tr></table>
</div><div><div class="b3"></div><div class="b2"></div><div class="b1"></div></div>
                    </td>
                    <td valign="top">
<div><div class="b1"></div><div class="b2"></div><div class="b3"></div></div><div class="bi">
                        <table height="60"><tr><td>
                        </td><td valign="top">
                            <a target="_blank" href="xui/misc/uiintpl.html">
                                <h4>xui.UI in xui.Template</h4>
                                <p>Puts xui.UI controls into xui.Template</p>
                            </a>
                        </td></tr></table>
</div><div><div class="b3"></div><div class="b2"></div><div class="b1"></div></div>
                    </td>
                </tr>
            </table>


            <div class="block">
<div><div class="b1"></div><div class="b2"></div><div class="b3"></div></div><div class="bi">
                    Appearances
</div><div><div class="b3"></div><div class="b2"></div><div class="b1"></div></div>
            </div>
            <table id="list" cellpadding="0" cellspacing="2" width="100%">
                <tr>
                    <td width="33%" valign="top">
<div><div class="b1"></div><div class="b2"></div><div class="b3"></div></div><div class="bi">                        
                        <table height="65"><tr><td>
                        </td><td valign="top">
                            <a target="_blank" href="xui/appearance/way1.html">
                                <h4>Change CSS class for all</h4>
                                <p>Use CSS class like 'xui-list-item' to modify the all widgets' appearances.</p>
                            </a>
                        </td></tr></table>
</div><div><div class="b3"></div><div class="b2"></div><div class="b1"></div></div>
                    </td>
                    <td width="33%" valign="top">
<div><div class="b1"></div><div class="b2"></div><div class="b3"></div></div><div class="bi">
                        <table height="65"><tr><td>
                        </td><td valign="top">
                            <a target="_blank" href="xui/appearance/way2.html">
                                <h4>Use domId for individual</h4>
                                <p>Use DOM id CSS to modify a specified widget's appearances.</p>
                            </a>
                        </td></tr></table>
</div><div><div class="b3"></div><div class="b2"></div><div class="b1"></div></div>
                    </td>
                    <td valign="top">
<div><div class="b1"></div><div class="b2"></div><div class="b3"></div></div><div class="bi">
                        <table height="65"><tr><td>
                        </td><td valign="top">
                            <a target="_blank" href="xui/appearance/way4.html">
                                <h4>Use setCustom[xxx] for individual</h4>
                                <p>Use setCustomClass/setCustomStyle to modify a specified widget's appearances.</p>
                            </a>
                        </td></tr></table>
</div><div><div class="b3"></div><div class="b2"></div><div class="b1"></div></div>
                    </td>
                </tr>
            </table>
            <table id="list" cellpadding="0" cellspacing="2" width="100%">
                <tr>
                    <td width="33%" valign="top">
<div><div class="b1"></div><div class="b2"></div><div class="b3"></div></div><div class="bi">                        
                        <table height="65"><tr><td>
                        </td><td valign="top">
                            <a target="_blank" href="xui/appearance/way5.html">
                                <h4>Use getSubNode for individual</h4>
                                <p>Use getSubNode function to modify a specified widget's appearances.</p>
                            </a>
                        </td></tr></table>
</div><div><div class="b3"></div><div class="b2"></div><div class="b1"></div></div>
                    </td>
                    <td width="33%" valign="top">
<div><div class="b1"></div><div class="b2"></div><div class="b3"></div></div><div class="bi">
                        <table height="65"><tr><td>
                        </td><td valign="top">
                            <a target="_blank" href="xui/appearance/way6.html">
                                <h4>Use itemClass or itemStyle for individual</h4>
                                <p>Use itemClass or itemStyle to modify a specified list node in a widget.</p>
                            </a>
                        </td></tr></table>
</div><div><div class="b3"></div><div class="b2"></div><div class="b1"></div></div>
                    </td>
                    <td valign="top">
<div><div class="b1"></div><div class="b2"></div><div class="b3"></div></div><div class="bi">
                        <table height="65"><tr><td>
                        </td><td valign="top">
                            <a target="_blank" href="xui/appearance/way3.html">
                                <h4>Use setTheme for individual</h4>
                                <p>Use setTheme to modify a specified widget's appearances.
                            </a>
                        </td></tr></table>
</div><div><div class="b3"></div><div class="b2"></div><div class="b1"></div></div>
                    </td>
                </tr>
            </table>


            <div class="block">
<div><div class="b1"></div><div class="b2"></div><div class="b3"></div></div><div class="bi">
                    Miscellaneous
</div><div><div class="b3"></div><div class="b2"></div><div class="b1"></div></div>
            </div>
            <table id="list" cellpadding="0" cellspacing="2" width="100%">
                <tr>
                    <td width="33%" valign="top">
<div><div class="b1"></div><div class="b2"></div><div class="b3"></div></div><div class="bi">                        
                        <table height="60"><tr><td>
                        </td><td valign="top">
                            <a target="_blank" href="xui/misc/loadconasy/index.html">
                                <h4>Load content asyn</h4>
                                <p>Load HTML string, Template, xui.UI or xui.Com into TreeBar asyn.</p>
                            </a>
                        </td></tr></table>
</div><div><div class="b3"></div><div class="b2"></div><div class="b1"></div></div>
                    </td>
                    <td width="33%" valign="top">
<div><div class="b1"></div><div class="b2"></div><div class="b3"></div></div><div class="bi">
                        <table height="60"><tr><td>
                        </td><td valign="top">
                            <a target="_blank" href="xui/misc/renderer/index.html">
                                <h4>Renderer</h4>
                                <p>Using renderer funcion to build complex caption.</p>
                            </a>
                        </td></tr></table>
</div><div><div class="b3"></div><div class="b2"></div><div class="b1"></div></div>
                    </td>
                    <td valign="top">
<div><div class="b1"></div><div class="b2"></div><div class="b3"></div></div><div class="bi">                        
                        <table height="60"><tr><td>
                        </td><td valign="top">
                            <a target="_blank" href="xui/app/tooltips/index.html">
                                <h4>Tooltips UI</h4>
                                <p>Shows tooltips in you web application</p>
                            </a>
                        </td></tr></table>
</div><div><div class="b3"></div><div class="b2"></div><div class="b1"></div></div>
                    </td>
                </tr>
            </table>
            <table id="list" cellpadding="0" cellspacing="2" width="100%">
                <tr>
                    <td width="33%" valign="top">
<div><div class="b1"></div><div class="b2"></div><div class="b3"></div></div><div class="bi">                        
                        <table height="60"><tr><td>
                        </td><td valign="top">
                            <a target="_blank" href="xui/misc/Behavior/index.html">
                                <h4>Behavior</h4>
                                <p>Widget events, setCustomBehavior and DOM attached events.</p>
                            </a>
                        </td></tr></table>
</div><div><div class="b3"></div><div class="b2"></div><div class="b1"></div></div>
                    </td>
                    <td width="33%" valign="top">
<div><div class="b1"></div><div class="b2"></div><div class="b3"></div></div><div class="bi">
                        <table height="60"><tr><td>
                        </td><td valign="top">
                            <a target="_blank" href="xui/misc/Debugger.html">
                                <h4>Variable Monitor</h4>
                                <p>The monitor window in CrossUI.</p>
                            </a>
                        </td></tr></table>
</div><div><div class="b3"></div><div class="b2"></div><div class="b1"></div></div>
                    </td>
                    <td valign="top">
<div><div class="b1"></div><div class="b2"></div><div class="b3"></div></div><div class="bi">
                        <table height="60"><tr><td>
                        </td><td valign="top">
                            <a target="_blank" href="xui/misc/hotkey.html">
                                <h4>Hot Keys</h4>
                                <p>How to use a global hot key</p>
                            </a>
                        </td></tr></table>
</div><div><div class="b3"></div><div class="b2"></div><div class="b1"></div></div>
                    </td>
                </tr>
            </table>
            <table id="list" cellpadding="0" cellspacing="2" width="100%">
                <tr>
                    <td width="33%" valign="top">
<div><div class="b1"></div><div class="b2"></div><div class="b3"></div></div><div class="bi">                        
                        <table height="60"><tr><td>
                        </td><td valign="top">
                            <a target="_blank" href="xui/misc/keyHook/index.html">
                                <h4>Keyboard Monitor</h4>
                                <p>Keyboard monitor for xui.UI.Input.</p>
                            </a>
                        </td></tr></table>
</div><div><div class="b3"></div><div class="b2"></div><div class="b1"></div></div>
                    </td>
                    <td width="33%" valign="top">
<div><div class="b1"></div><div class="b2"></div><div class="b3"></div></div><div class="bi">
                        <table height="60"><tr><td>
                        </td><td valign="top">
                            <a target="_blank" href="xui/misc/renderto/index.html">
                                <h4>xui.UI renderonto</h4>
                                <p>Render xui.UI widget to an existing DOM Element.</p>
                            </a>
                        </td></tr></table>
</div><div><div class="b3"></div><div class="b2"></div><div class="b1"></div></div>
                    </td>
                    <td valign="top">
<div><div class="b1"></div><div class="b2"></div><div class="b3"></div></div><div class="bi">
                        <table height="60"><tr><td>
                        </td><td valign="top">
                            <a target="_blank" href="xui/misc/dock/index.html">
                               <h4>Docking</h4>
                                <p>Docking widgets example.</p>
                            </a>
                        </td></tr></table>
</div><div><div class="b3"></div><div class="b2"></div><div class="b1"></div></div>
                    </td>
                </tr>
            </table>
            
            <div id="tail">
                © 2019 - CrossUI.com. All rights reserved.
            </div>
    </div>


<style>#xuibar a, #xuibar span{font-size:12px;margin-right:2px;padding:2px;}#xuibar a{text-decoration:underline;}#xuibar_more a{text-decoration:none;padding:3px;font-size:12px;text-decoration:none;display:block;}#xuibar a:hover, #xuibar_more a:hover{text-decoration:none;color:#fff!important;background:#598EDD;}#xuibar small{font-size:9px;}#xuibar_more{position:absolute;display:none;top:19px;z-index:6000;border:solid 1px;border-color:#E4F1FD #598EDD #598EDD #598EDD; background:#E4F1FD;}#xuibar_more{width:100px;}</style><script>var xuibar={byId:function(id){return document.getElementById(id).style},get1:function(){return this.byId('xuibar')},get2:function(id){return this.byId(id)},get3:function(){return this.byId('xuibar_l')},show:function(){var n=this;if(n._t1){clearTimeout(n._t1);delete n._t1;}var s=n.get1();s.height='19px';s.backgroundColor='#E4F1FD';n.get3().display='block';},hide:function(){var n=this;if(n._t1){clearTimeout(n._t1);delete n._t1;}n._t1=setTimeout(function(){var s=n.get1();s.height='3px';s.backgroundColor='#598EDD';n.get3().display='none';if(n.showed)n.get2(n.showed).display='none';},600);},showPop:function(ele){var n=this,id=ele.id.replace(/.*:/,'');if(n.showed&&id!=n.showed)n.get2(n.showed).display='none';if(n._t1){clearTimeout(n._t1);delete n._t1;}if(n._t2){clearTimeout(n._t2);delete n._t2;}n.showed=id;if(ele.id.indexOf('pop:')==0){var s=n.get2(id);s.left=(ele.offsetLeft-4)+'px';s.display='block';}},hidePop:function(){var n=this;if(n._t2){clearTimeout(n._t2);delete n._t2;}n._t2=setTimeout(function(){n.get2('xuibar_more').display='none';},100);n.hide();}};</script><div id='xuibar' onmouseout="xuibar.hide()"  onmouseover="xuibar.show()" style='position:absolute;width:100%;left:0;top:0;height:3px;z-index:5000;background:#598EDD;line-height:19px;overflow:hidden;'><nobr><a target=_blank href='https://www.crossui.com'><strong>CrossUI Home</strong></a><a target=_blank href='https://www.crossui.com/RADGithub'>RAD Tools</a><a target=_blank href='https://www.crossui.com/xui/Examples'>Examples</a><a target=_blank href='https://www.crossui.com/FormBuilder'>Form Builder</a><a target=_blank href='https://www.crossui.com/FCEditor'>FusionCharts Editor</a><a target=_blank href='https://www.crossui.com/JSONEditor'>JSONEditor</a><a target=_blank href='https://www.crossui.com/xui/API/index.html'>API</a><!--a target=_blank href='https://www.crossui.com/Forum'>Forum</a--><a target=_blank href='https://www.crossui.com/order.html'><strong>Buy Now</strong></a></nobr></div><div id='xuibar_l' style="left:0;position:absolute;top:19px;display:none;border-top:1px solid #598EDD;font-size:0;line-height:0;width:100%;z-index:5500;"></div><script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-59755ed8d0255613"></script>
<script>setTimeout(function(){(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-39926100-1', 'crossui.com');ga('send', 'pageview');},100);</script>

</body>
</html>